<template>
    <div id="Box" >
        <h2 class="title">{{ title }}</h2>
        <slot class="box">默认插槽，插入版块</slot>
        <div class="more-btn">
            <el-button type="danger" class="btn" round
            @mouseenter="handleHover"
            @mouseleave="handleLeave"
            @click="enter(destination)">
                <span class="text" :class="textClass">More</span>
                <el-icon :class="iconClass" size="25px"><Right/></el-icon>
            </el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { Right } from '@element-plus/icons-vue';
import { ref } from 'vue';
defineProps({
    title:{
        type:String,
        require:true,
    },
    destination:{
        type:String,
        require:true,
    }
})

const iconClass=ref('')
const textClass=ref('')

function handleHover(){
    iconClass.value='animate__animated animate__fadeInLeft'
    textClass.value=''
}

function handleLeave(){
    iconClass.value=''
    textClass.value='animate__animated animate__fadeInRight'
}

function enter(destination:string){
    router.push('/'+destination)
}

</script>

<style scoped>
.title{
    text-align: left;
    font-weight: bolder;
    font-size: 35px;
    margin: 20px 0;
    color: black;
    font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC','Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
.box{
    margin: 20px 0;
}
.more-btn{
    margin: 20px 0;
    text-align: right;
    margin-right: 35px;
}
.btn{
    width: 130px;
    height: 35px;
    overflow: hidden;
    padding: 20px;
}

.text{
    transition: opacity 0.3s ease;
    opacity: 1;
    font-size: 20px;
}

.el-icon{
    opacity: 0;
    transition: opacity 0.3s ease;
}
.btn:hover .text{
    opacity: 0;
}

.btn:hover .el-icon{
    opacity: 1;
}


</style>
